<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>


    <style type="text/css">
        .search_input {
            overflow: visible;
            background-color: #FFFFFF;
            background-image: none;
            border: 1px solid #e5e6e7;
            border-radius: 1px;
            color: inherit;
            display: block;
            padding: 6px 12px;
            transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        }
    </style>
</head>

<body>


<div class="breadcome-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="breadcome-list single-page-breadcome">
                    <div class="row">


                        <form id="searchForm">
                            <div class="col-lg-2 col-md-2 col-sm-2">

                                <input class="form-control" name="company" placeholder="请输入所属公司"/>

                            </div>

                            <div class="col-lg-2 col-md-2 col-sm-2 ">

                                <input type="text" name="trainNo" placeholder="请输入列车编号"
                                       class="search-int form-control">

                            </div>

                        </form>
                        <div class="col-lg-2 col-md-2 col-sm-2">
                            <button class="btn btn-primary" onclick="operation.searchForm()">查询</button>
                            <!--
                                                                        <a href="javascript:void(0)" onclick="operation.searchForm()"><i class="fa fa-search"></i></a>
                            -->
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mg-b-15">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="product-status-wrap drp-lst">
                    <h4>车辆管理</h4>
                    <div class="add-product">
                        <a href="#" onclick="operation.addWindow()">添加</a>
                    </div>
                    <div class="asset-inner">

                        <table id="dg"></table>


                    </div>


                </div>
            </div>
        </div>
    </div>
</div>


<!-- 第一个model 开始 -->
<div id="setFormModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keybord="false">
    <div class="modal-dialog" style="width:1000px">
        <div class="modal-content">
            <div class="modal-header">
                编辑
            </div>
            <!-- modal-body 开始 -->
            <div class="modal-body">
                <form id="setFormId" class="form-horizontal" enctype="multipart/form-data">
                    <input type="hidden" name="id">


                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right" for="trainNo">列车编号</label>
                        <div class="col-sm-4">
                            <input class="form-control" name="trainNo" placeholder="请输入列车编号"/>
                        </div>
                        <label class="col-sm-2 col-form-label text-right" for="brand">牌照</label>
                        <div class="col-sm-4">
                            <input class="form-control" name="brand" placeholder="请输入牌照"/>
                        </div>

                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right" for="company">所属公司</label>
                        <div class="col-sm-4">
                            <input class="form-control" name="company" placeholder="请输入所属公司"/>
                        </div>


                        <label class="col-sm-2 col-form-label text-right" for="trainTypeName">车辆类型</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="trainTypeName" placeholder="请输入列车类型名称">
                                <option value="高速动车组列车">高速动车组列车</option>
                                <option value="城际动车组列车">城际动车组列车</option>
                                <option value="普通动车组列车">普通动车组列车</option>
                                <option value="直达特快旅客列车">直达特快旅客列车</option>
                                <option value="特快旅客列车">特快旅客列车</option>
                                <option value="快速旅客列车">快速旅客列车</option>
                                <option value="普通旅客快车">普通旅客快车</option>
                            </select>
                        </div>

                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right" for="licheng">累计里程</label>
                        <div class="col-sm-4">
                            <input class="form-control" name="licheng" placeholder="请输里程"/>
                        </div>

                        <label class="col-sm-2 col-form-label text-right" for="xingzhi">使用性质</label>
                        <div class="col-sm-4">
                            <!--							<input class="form-control"  name="xingzhi"  placeholder="使用性质"/>-->
                            <select class="form-control" name="xingzhi" placeholder="请输入车辆状态">
                                <option value="客运">客运</option>
                                <option value="货运">货运</option>

                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label text-right" for="dengjiriqi">登记日期</label>
                        <div class="col-sm-4">
                            <input class="form-control" id="dengjiriqi" name="dengjiriqi" placeholder="请输入登记日期"/>
                        </div>
                        <label class="col-sm-2 col-form-label text-right" for="line">线路</label>
                        <div class="col-sm-4">
                            <input class="form-control" name="line" placeholder="线路"/>
                        </div>
                    </div>
                    <div class="form-group row">

                        <label class="col-sm-2 col-form-label text-right" for="line">车辆状态</label>
                        <div class="col-sm-4">
                            <!--							<input class="form-control"  name="cheliangzhuangtai"  placeholder="车辆状态"/>-->
                            <select class="form-control" name="cheliangzhuangtai" placeholder="请输入车辆状态">
                                <option value="正常使用">正常使用</option>
                                <option value="维修中">维修中</option>

                            </select>
                        </div>
                    </div>


                    <!--						<div class="form-group row">-->
                    <!--							<label class="col-sm-2 col-form-label text-right" for="startTrainDate">列车出发日期</label>-->
                    <!--							<div class="col-sm-4">-->
                    <!--								<input class="form-control" id="startTrainDate"  name="startTrainDate"  placeholder="请输入列车出发日期"/>-->
                    <!--							</div>-->

                    <!--							<label class="col-sm-2 col-form-label text-right" for="trainNo">列车编号</label>-->
                    <!--							<div class="col-sm-4">-->
                    <!--								<input class="form-control"  name="trainNo"  placeholder="请输入列车编号"/>-->
                    <!--							</div>-->
                    <!--						</div>-->
                    <!--						<div class="form-group row">
                                                <label class="col-sm-2 col-form-label text-right" for="startStationTelecode">起始站编号</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control"  name="startStationTelecode"  placeholder="请输入起始站编号"/>
                                                </div>

                                                <label class="col-sm-2 col-form-label text-right" for="startStationName">起始站名称</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control"  name="startStationName"  placeholder="请输入起始站名称"/>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label text-right" for="startStartTime">列车出发时间</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control" id="startStartTime" name="startStartTime"  placeholder="请输入列车出发时间"/>
                                                </div>

                                                <label class="col-sm-2 col-form-label text-right" for="endStationTelecode">终点站编号</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control"  name="endStationTelecode"  placeholder="请输入终点站编号"/>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label text-right" for="endStationName">终点站名称</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control"  name="endStationName"  placeholder="请输入终点站名称"/>
                                                </div>

                                                <label class="col-sm-2 col-form-label text-right" for="endArriveTime">终点站到达时间</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control" id="endArriveTime"  name="endArriveTime"  placeholder="请输入终点站到达时间"/>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label text-right" for="trainTypeName">列车类型名称</label>
                                                <div class="col-sm-4">
                                                    <select class="form-control"  name="trainTypeName"  placeholder="请输入列车类型名称">
                                                        <option value="高速动车组列车">高速动车组列车</option>
                                                        <option value="城际动车组列车">城际动车组列车</option>
                                                        <option value="普通动车组列车">普通动车组列车</option>
                                                        <option value="直达特快旅客列车">直达特快旅客列车</option>
                                                        <option value="特快旅客列车">特快旅客列车</option>
                                                        <option value="快速旅客列车">快速旅客列车</option>
                                                        <option value="普通旅客快车">普通旅客快车</option>
                                                    </select>
                                                </div>

                                                <label class="col-sm-2 col-form-label text-right" for="trainClassName">列车种类名称</label>
                                                <div class="col-sm-4">
                                                    <input class="form-control"  name="trainClassName"  placeholder="请输入列车种类名称"/>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label text-right" for="seatTypes">座位类型</label>
                                                <div class="col-sm-4">
                                                    <select class="form-control"  name="seatTypes"  placeholder="请输入列车类型名称">
                                                        <option value="软座车">软座车</option>
                                                        <option value="硬座车">硬座车(YZ)</option>
                                                        <option value="硬卧车">硬卧车(YW)</option>
                                                        <option value="软卧车">软卧车(RW)</option>
                                                        <option value="特等/一等/二等软座车">特等/一等/二等软座车</option>
                                                        <option value="双层硬座车">双层硬座车</option>
                                                        <option value="双层硬卧车">双层硬卧车</option>
                                                    </select>
                                                </div>
                                            </div>-->

                </form>
            </div>
            <!-- modal-body 结束 -->
            <div class="modal-footer">
                <button id="add_save_btn" type="button" class="btn btn-default btn-outline btn-sm"
                        onclick="operation.addForm()">
                    <span class="glyphicon glyphicon-ok"></span>保存
                </button>
                <button id="edit_save_btn" type="button" class="btn btn-default btn-outline btn-sm"
                        onclick="operation.editForm()">
                    <span class="glyphicon glyphicon-ok"></span>保存
                </button>
                <button id="delete_save_btn" type="button" class="btn btn-default btn-outline btn-sm"
                        onclick="operation.closeMoal()">
                    <span class="glyphicon glyphicon-remove"></span>关闭
                </button>
            </div>

        </div>
    </div>
</div>
<!-- 第一个model 结束 -->

<!-- Page-Level Scripts -->
<script type="text/javascript" th:inline="none">

    $('#dengjiriqi').datetimepicker({
        format: 'yyyy-mm-dd',
        minView: 2,
        //minDate: '2016-7-1'
    });

    /*	$('#startStartTime').datetimepicker({
            format: 'yyyy-mm-dd',
            minView: 2,
            //minDate: '2016-7-1'
        });

        $('#endArriveTime').datetimepicker({
            format: 'yyyy-mm-dd',
            minView: 2,
            //minDate: '2016-7-1'
        });*/


    var operation = {
        searchForm: function () {
            $('#dg').bootstrapTable("refresh");
        },
        //弹出添加页面
        addWindow: function () {
            $('#setFormModal').modal('show');
            formObj.setBtnIsShow("add_save_btn", "edit_save_btn", 1);

        },
        //添加表单
        addForm: function () {
            $("#setFormId").bootstrapValidator('validate');
            if ($("#setFormId").data("bootstrapValidator").isValid()) {
                var temp = getFormJson("setFormId");


                $.post("/ZcxTrainInfo/insertZcxTrainInfo", temp, function (data) {

                    $("#dg").bootstrapTable("refresh");
                    message.alert(data.showInfo);
                    $('#setFormId').data('bootstrapValidator').resetForm(true);
                    $('#setFormId')[0].reset();
                    $('#setFormModal').modal('hide');
                });
            }

        },
        //弹出修改页面
        editWindow: function (index) {
            var row = $("#dg").bootstrapTable("getData")[index];
            setForm("#setFormId", row);
            $('#setFormModal').modal('show');
            formObj.setBtnIsShow("add_save_btn", "edit_save_btn", 0);

        },
        //修改表单
        editForm: function () {
            var validate = $("#setFormId").bootstrapValidator('validate');
            if ($("#setFormId").data("bootstrapValidator").isValid()) {
                var temp = getFormJson("setFormId");
                $.post("/ZcxTrainInfo/updateZcxTrainInfo", temp, function (data) {

                    $("#dg").bootstrapTable("refresh");
                    message.alert(data.showInfo);
                    $('#setFormId').data('bootstrapValidator').resetForm(true);
                    $('#setFormId')[0].reset();
                    $('#setFormModal').modal('hide');
                });
            }

        },
        //删除表单
        deleteFrom: function (index) {
            var row = $("#dg").bootstrapTable("getData")[index];
            bootbox.confirm({
                size: "small",
                title: "提示",
                message: "确认删除这条数据吗？",
                callback: function (result) {
                    if (result) {
                        $.post("/ZcxTrainInfo/deleteZcxTrainInfo", {id: row.id}, function (data) {

                            $("#dg").bootstrapTable("refresh");
                            message.alert(data.showInfo);

                        });

                    }
                }
            });


        },
        //关闭页面
        closeMoal: function () {
            $('#setFormId').data('bootstrapValidator').resetForm(true);
            //$('#setFormId').reset();
            $('#setFormModal').modal('hide');
        },
        //导出
        exportFile: function () {


        },
        //审核
        audit: function () {


        },


    }


    $(function () {
        //表格格式化
        var fmt = {
            queryParams: function (params) {
                var temp = getFormJson("searchForm");
                temp.rows = params.limit;
                temp.currentPage = (params.offset / params.limit) + 1;
                return temp;

            },
            setTime: function (value, row, index) {

                return formatTimeYMDhms(value);  //转成年月日时分秒
            },
            setOpt: function (value, row, index) {
                var html = '';
                /* '<button class="btn-white btn btn-xs">查看</button>'+ */
                html += '<button id="edit_btn" class="btn btn-outline-secondary btn-sm"  onclick="operation.editWindow(' + index + ')">编辑</button>';
                html += '<button class="btn btn-outline-secondary btn-sm"  onclick="operation.deleteFrom(' + index + ')">删除</button>';
                return html;
            },
            setActImgUrl: function (value, row, index) {
                return '<img src="/TBook/queryPic?id=' + row.id + '" style="width:100px;heigth:100px"></img>';
            },
            setBorrow: function (value, row, index) {
                var htm = "";
                if (row.borrow == 0) {
                    htm = "未借阅";
                }
                if (row.borrow == 1) {
                    htm = "<span style='color:red;'>已借阅</span>";
                }
                return htm;
            },
        }

        var columns = [[

            {
                field: 'id',
                title: 'id',
                width: 10,
                align: 'center',
                visible: false
            },


            {title: '列车编号', field: 'trainNo', align: 'center', valign: 'middle', visible: true},
            {title: '牌照', field: 'brand', align: 'center', valign: 'middle', visible: true},
            /*
            {title: '所属公司', field: 'company', align: 'center', valign: 'middle',visible:true},
                {title: '线路', field: 'line', align: 'center', valign: 'middle',visible:true},
            */
            {title: '车辆型号', field: 'trainTypeName', align: 'center', valign: 'middle', visible: true},
            {title: '里程（km）', field: 'licheng', align: 'center', valign: 'middle', visible: true},
            {title: '使用性质', field: 'xingzhi', align: 'center', valign: 'middle', visible: true},
            {title: '登记日期', field: 'dengjiriqi', align: 'center', valign: 'middle', visible: true},
            /*
                        {title: '车辆状态', field: 'cheliangzhuangtai', align: 'center', valign: 'middle',visible:true},
            */
            {title: '车辆状态', field: 'status', align: 'center', valign: 'middle', visible: true},


            /*
                    {title: '列车出发日期', field: 'startTrainDate', align: 'center', valign: 'middle',visible:true},
                    {title: '列车编号', field: 'trainNo', align: 'center', valign: 'middle',visible:true},
                    {title: '起始站编号', field: 'startStationTelecode', align: 'center', valign: 'middle',visible:true},
                    {title: '起始站名称', field: 'startStationName', align: 'center', valign: 'middle',visible:true},
                    {title: '列车出发时间', field: 'startStartTime', align: 'center', valign: 'middle',visible:true},
                    {title: '终点站编号', field: 'endStationTelecode', align: 'center', valign: 'middle',visible:true},
                    {title: '终点站名称', field: 'endStationName', align: 'center', valign: 'middle',visible:true},
                    {title: '终点站到达时间', field: 'endArriveTime', align: 'center', valign: 'middle',visible:true},
                    {title: '列车类型名称', field: 'trainTypeName', align: 'center', valign: 'middle',visible:true},
                    {title: '列车种类名称', field: 'trainClassName', align: 'center', valign: 'middle',visible:true},
                    {title: '座位类型', field: 'seatTypes', align: 'center', valign: 'middle',visible:true},*/
            {title: '维修次数', field: 'isUpdate', align: 'center', valign: 'middle', visible: true},
            {title: '创建时间', field: 'createTime', align: 'center', valign: 'middle', visible: true},
            {title: '操作', field: 'opt', align: 'center', valign: 'middle', visible: true, formatter: fmt.setOpt},


        ]];


        $('#dg').bootstrapTable({
            url: "/ZcxTrainInfo/query",
            sidePagination: "server",
            queryParams: fmt.queryParams,
            method: "post",
            contentType: "application/x-www-form-urlencoded",
            pagination: true,
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            //search:true,
            clickToSelect: true,
            singleSelect: true,
            toolbar: '#toolbar',
            columns: columns,
        })

    });


    $(function () {
        $("#setFormId").bootstrapValidator({
            /* live:'disabled',
            excluded:[':disabled'],
            feedbackIcons: {
        　　　　　　　　valid: 'glyphicon glyphicon-ok',
        　　　　　　　　invalid: 'glyphicon glyphicon-remove',
        　　　　　　　　validating: 'glyphicon glyphicon-refresh'
    　　　　　   },*/
            fields: {


                startTrainDate: {
                    validators: {
                        notEmpty: {
                            message: "列车出发日期不能为空!",
                        },
                    }

                },


                trainNo: {
                    validators: {
                        notEmpty: {
                            message: "列车编号不能为空!",
                        },
                    }

                },


                startStationTelecode: {
                    validators: {
                        notEmpty: {
                            message: "起始站编号不能为空!",
                        },
                    }

                },


                startStationName: {
                    validators: {
                        notEmpty: {
                            message: "起始站名称不能为空!",
                        },
                    }

                },


                startStartTime: {
                    validators: {
                        notEmpty: {
                            message: "列车出发时间不能为空!",
                        },
                    }

                },


                endStationTelecode: {
                    validators: {
                        notEmpty: {
                            message: "终点站编号不能为空!",
                        },
                    }

                },


                endStationName: {
                    validators: {
                        notEmpty: {
                            message: "终点站名称不能为空!",
                        },
                    }

                },


                endArriveTime: {
                    validators: {
                        notEmpty: {
                            message: "终点站到达时间不能为空!",
                        },
                    }

                },


                trainTypeName: {
                    validators: {
                        notEmpty: {
                            message: "列车类型名称不能为空!",
                        },
                    }

                },


                trainClassName: {
                    validators: {
                        notEmpty: {
                            message: "列车种类名称不能为空!",
                        },
                    }

                },


                seatTypes: {
                    validators: {
                        notEmpty: {
                            message: "座位类型不能为空!",
                        },
                    }

                },


                isUpdate: {
                    validators: {
                        notEmpty: {
                            message: "是否更新不能为空!",
                        },
                    }

                },


                createTime: {
                    validators: {
                        notEmpty: {
                            message: "创建时间不能为空!",
                        },
                    }

                },


            }

        });


    })


</script>

</body>

</html>
